window.onload = function()
{
	domaineClique = "";
	dessinerGraphe(domaineClique);
	
	$("#canvasVisualisation").click(function(eventObject) 
	{
		mouseX = eventObject.pageX - this.offsetLeft;
		mouseY = eventObject.pageY - this.offsetTop;
		clicGraphe(mouseX,mouseY);
	});
}

var elementsDomaines;
var elementsConcepts;
var domaineClique;

function clicGraphe(x,y)
{
	// Recherche dans les concepts
	for(i=0; i<elementsConcepts.length; i++)
	{
		if (x > elementsConcepts[i].mX - elementsConcepts[i].mLargeur/2 &&
			    x < elementsConcepts[i].mX + elementsConcepts[i].mLargeur/2 && 
			    y > elementsConcepts[i].mY - elementsConcepts[i].mHauteur/2 &&
			    y < elementsConcepts[i].mY + elementsConcepts[i].mHauteur/2)
		{
			window.location.href = 'index.php?page=concept&concept=' + elementsConcepts[i].mTexte;
		}
	}
	
	for(i=0; i<elementsDomaines.length; i++)
	{
			if (x > elementsDomaines[i].mX - elementsDomaines[i].mLargeur/2 + 40 &&
			    x < elementsDomaines[i].mX + elementsDomaines[i].mLargeur/2 - 40 && 
			    y > elementsDomaines[i].mY - elementsDomaines[i].mHauteur/2 &&
			    y < elementsDomaines[i].mY + elementsDomaines[i].mHauteur/2)
			{
					// Si on clique sur le même domaine
					if (domaineClique != "" && domaineClique.mTexte == elementsDomaines[i].mTexte)
					{
						domaineClique = "";
						elementsConcepts = new Array();
					}
					else
					{
						domaineClique = elementsDomaines[i];
					}
			}
			
	}
	dessinerGraphe(domaineClique);
}

function dessinerGraphe(d)
{
	// Récupération du canvas
	var canvas = document.getElementById("canvasVisualisation");
        var contexte = canvas.getContext("2d");
        var domaineClique = d.mTexte;
        // On efface l'affichage précédent
        contexte.clearRect(0,0,canvas.width,canvas.height);
        
	elementsDomaines = new Array();
	elementsConcepts = new Array();
        
        var thesaurus = new NoeudGraphe(contexte,"Thésaurus",canvas.width/2,50);
        // Dessin des concepts
	var concepts = getConcepts(domaineClique);
	if (concepts != "")
	{
		for (i=0; i<concepts.length; i++)
		{
			x = (i+1)*1000/(concepts.length+1);
			y = thesaurus.mY + 350;
			var concept = new NoeudGraphe(contexte,concepts[i],x,y,"#84815b",true,50,30);
			elementsConcepts.push(concept);
			dessinerTrait(contexte,x,y,d.mX,d.mY);
			concept.dessiner();
		}
	}
	
	// Dessin des domaines
	var domains = getDomains();
	if (domains != "")
	{
		for (i=0; i<domains.length; i++)
		{
			x = (i+1)*1000/(domains.length+1);
			y = thesaurus.mY + 150;
			var domaine = new NoeudGraphe(contexte,domains[i],x,y,"#84815b",false,250,50);
			elementsDomaines.push(domaine);
			dessinerTrait(contexte,x,y,thesaurus.mX,thesaurus.mY);
			domaine.dessiner();
		}
	}
        
        thesaurus.dessiner();
}

// Retourne un tableau contenant les domaines présents sur le serveur.
function getDomains()
{
		var retour;
		xhr = getXhr();
		xhr.onreadystatechange = function()
		{
			if (xhr.readyState == 4 && xhr.status == 200)
			{
					var r = xhr.responseText;
					retour = r.split("*");
			}
		};
		xhr.open("GET","ajaxvisu.php?query=domains",false);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.send();
		
		return retour;
};

// Retourne un tableau contenant les concepts présents sur le serveur pour un domaine donné. 
function getConcepts(domain)
{
		var retour;
		xhr = getXhr();
		xhr.onreadystatechange = function()
		{
			if (xhr.readyState == 4 && xhr.status == 200)
			{
					var r = xhr.responseText;
					retour = r.split("*");
			}
		};
		xhr.open("GET","ajaxvisu.php?query=concepts&domain="+domain,false);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.send();
		
		return retour;
};

// Gestion de l'AJAX
function getXhr()
{
	var xhr = null; 
	if(window.XMLHttpRequest)
		xhr = new XMLHttpRequest();
	else
	{ 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
	return xhr
}

// Classe qui représente un noeud du graphe
	// concept : booléen. Vrai = concept, faux = non.
	// couleur, concept, largeur, hauteur sont optionnels.
function NoeudGraphe(contexte,texte,x,y,couleur,concept,largeur,hauteur)
{
	var mContexte = contexte
	this.mTexte = texte;
	this.mX = x;
	this.mY = y;
	
	if (couleur == undefined) { var mCouleur = "#ADCF4F"; }
	else { var mCouleur = couleur; }
	
	if (concept == undefined) { var mConcept = false; }
	else { var mConcept = concept; }
	
	if (largeur == undefined) { this.mLargeur = 300; }
	else { this.mLargeur = largeur; }
	
	if (hauteur == undefined) { this.mHauteur = 80; }
	else { this.mHauteur = hauteur; }
	
	this.dessiner = function()
	{
		mContexte.beginPath();
		mContexte.moveTo(this.mX,this.mY-this.mHauteur/2);
		// Ellipse
		mContexte.bezierCurveTo(this.mX+this.mLargeur/2,this.mY-this.mHauteur/2,this.mX+this.mLargeur/2,this.mY+this.mHauteur/2,this.mX,this.mY+this.mHauteur/2);
		mContexte.bezierCurveTo(this.mX-this.mLargeur/2,this.mY+this.mHauteur/2,this.mX-this.mLargeur/2,this.mY-this.mHauteur/2,this.mX,this.mY-this.mHauteur/2);
		// Remplissage
		mContexte.fillStyle = mCouleur;
		mContexte.fill();
		mContexte.closePath();
		// Draw Text
		if (concept)
		{ var fontSize = 12; }
		else
		{ var fontSize = 24; }
		mContexte.font = fontSize + "px Arial";
		var textWidth = mContexte.measureText(this.mTexte).width;
		mContexte.fillStyle = "#3f2929";
		// Si c'est un concept, on écrit en dessous.
		if (concept)
		{ mContexte.fillText(this.mTexte,x-textWidth/2,this.mY+fontSize*2); }
		// Sinon non
		else { mContexte.fillText(this.mTexte,x-textWidth/2,this.mY+fontSize/4); }
	}
}

// Dessine un trait sur le contexte donné, de (x,y) à (xb,yb)
function dessinerTrait(contexte,x,y,xb,yb)
{
	contexte.beginPath();
	contexte.moveTo(x,y);
	contexte.lineTo(xb,yb);
	contexte.strokeStyle ='#3f2929';
	contexte.stroke();
	contexte.closePath();
}
